import '../style/appleBasket.scss'
import AppleItem from './AppleItem'
import React, { useEffect } from 'react'
import { observer } from 'mobx-react-lite'
import { useRootStore } from '../store/RootStore'
import { reaction } from 'mobx'

function AppleBasket () {  
  const { appleBasketStore } = useRootStore()
  return (
    <div className="appleBusket">
      <div className="title">苹果篮子</div>

      <div className="stats">
        <div className="section">
          <div className="head">当前</div>
          <div className="content">{appleBasketStore.currentApples.length}个苹果，{appleBasketStore.countAppleWeight}克</div>
        </div>
        <div className="section">
          <div className="head">已吃掉</div>
          <div className="content">{appleBasketStore.eatedApples.length}个苹果，{appleBasketStore.countEatedApple}克</div>
        </div>
      </div>

      <div className="appleList">
        {
          appleBasketStore.currentApples.length > 0 ?
            appleBasketStore.currentApples.map(apple => (
              <AppleItem apple={apple} key={apple.id}/>
            )) : 
            <div className="empty-tip" key="empty">苹果篮子空空如也</div>
        }
      </div>

      <div className="btn-div">
        <button className={appleBasketStore.isPicking ? 'disabled' : ""} onClick={appleBasketStore.getApples}>摘苹果</button>
      </div>
    </div>
  )
  
}

export default observer(AppleBasket)